<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        body {
            background: #dedede;
        }

        .shouyie {
            width: 750px;
            height: 300px;
            background: #fff;
            margin: auto;
        }

        .shouyie p {
            height: 50px;
            line-height: 50px;
            text-align: center;
            font-size: 20px;
            font-weight: 700;
        }




        .shenghuo {
            width: 750px;
            height: 200px;
            background: #fff;
            margin: auto;
            display: flex;
            display: -webkit-flex;
            justify-content: space-around;
            align-items: center;
        }

        .shenghuo p {
            /* text-align: center; */
            display: flex;
            display: -webkit-flex;
            flex-direction: column;
            align-items: center;
            padding-top: 10px;
        }




        .center {
            width: 750px;
            height: 300px;
            background: #fff;
            margin: auto;
            border-top: 20px solid #f3f3f3;
            border-bottom: 20px solid #f3f3f3;
        }

        .center ul {
            display: flex;
            display: -webkit-flex;
            justify-content: space-around;
            flex-wrap: wrap;
        }

        .center ul li {
            width: 350px;
            height: 131px;
            background: #F2F2F2;
            display: flex;
            display: -webkit-flex;
            align-items: center;
            margin-bottom: 10px;
            justify-content: space-between;
            margin-top: 10px;

        }

        .center ul li p {
            margin-left: 20px;
            font-size: 20px;
            font-weight: 800;
        }

        .center ul li p span {
            font-size: 16px;
            font-weight: 600;
            color: rgb(184, 126, 126);
        }

        .jingpin {
            width: 750px;
            height: 128px;
            margin: auto;
            background: #fff;
            display: -webkit-flex;
            align-items: center;
            border-bottom: 20px solid #f3f3f3;
        }

        .jingpin h5 {
           margin-left: auto;
            font-size: 20px;
            font-weight: normal;
            margin-right: 15px;
        }

        .jingpin h3 {
            font-size: 20px;
        }

        .jingpin h3 p {
            font-size: 18px;
            color: red;
            font-weight: normal;
        }

        .jingpin h3 p del {
            color: #666;
            font-size: 14px;
          
        }
    </style>
</head>

<body>
    <div class="shouyie">
        <p>生活</p>
        <img src="./images/shenghuoshouyie.jpg" alt="">
    </div>

    <ul class="shenghuo">
        <li>
            <img src="./images/shenghuo-1.png" alt="">
            <p>餐饮美食</p>
        </li>
        <li>
            <img src="./images/shenghuo-2.png" alt="">
            <p>社区商城</p>
        </li>
        <li>
            <img src="./images/shenghuo-3.png" alt="">
            <p>服务预订</p>
        </li>
        <li>
            <img src="./images/shenghuo-4.jpg" alt="">
            <p>课程培训</p>
        </li>
    </ul>
    <div class="center">
        <ul>
            <li>
                <p>爱鲜蜂<br><span>消费满100送100元</span></p>
                <img src="./images/shouyie-1.png" alt="">
            </li>
            <li>
                <p>景湖城食店<br><span>消费满80送20元</span></p>
                <img src="./images/shouyie-2.png" alt="">
            </li>
            <li>
                <p>伊耐净洗衣<br><span>消费满88送20元</span></p>
                <img src="./images/shouyie-3.png" alt="">
            </li>
            <li>
                <p>家家乐超市<br><span>消费满100送50元</span></p>
                <img src="./images/shouyie-4.jpg" alt="">
            </li>
        </ul>
    </div>
    <div class="jingpin">
        <img src="./images/jingpin.jpg" alt="">
        <h3>超值1元换购麦当劳(限一个） <p>￥1.00 <del>￥12.00 </del></p>
        </h3>

        <h5>></h5>
    </div>
    <div class="huifu">
        <p>社区影院<span>></span></p>
        <img src="./images/huifu.jpg" alt="">
    </div>
</body>

</html>